<template>
  <FIAutocomplete class="fi-icon-input" valueKey="font_class" :dataArr="iconList">
    <template #default="{ item }">
      <div class="fi-icon-input-content">
        <i :class="`font_family icon-${item.font_class}`"></i>&nbsp;&nbsp;&nbsp;
        <span>{{ item.name }}</span>
      </div>

      <!-- {{ item }} -->
    </template>
  </FIAutocomplete>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import iconData from '@/assets/font_4391505_0t62slsze45/iconfont.json'
import FIAutocomplete from '@/components/FIAutocomplete.vue'
const iconList = ref(iconData['glyphs'])
onMounted(() => {
  iconList.value = iconData['glyphs']
  // console.log('FIIconInput----', iconData, iconList.value)
})
</script>
<style lang="less" scoped>
.fi-icon-input {
  .fi-icon-input-content {
    display: flex;
    text-align: center;
  }
  ::v-deep(
      .el-input
        .el-input__wrapper
        .el-input__wrapper
        .el-autocomplete-suggestion__wrap
        .el-autocomplete-suggestion__list
    ) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}
</style>
